<template>
    <div class="xiaolunbotu">
        <div class="xLunboTop">
            <div class="left">
                <span>食在当季</span>
                <div class="img">
                    <img src="../../assets/img/首页/首页内容/赏期推荐-箭头.png" alt="">
                    <span>赏期推荐</span>
                </div>
            </div>
            <div class="right">
                <span>查看全部 ></span>
            </div>
        </div>
        <div class="xLunboBottom">
            <div class="inner">
                <div class="x-l-top">
                    <img src="../../assets/img/首页/首页内容/地标名品.png" alt="">
                    <span>"地标名品，原切黄牛肉"</span>
                </div>
                <div class="x-l-bottom">
                    <div class="left">
                        <img src="../../assets/img/首页/首页内容/阳信牛肉.png" alt="">
                    </div>
                    <div class="right">
                        <h2>阳信牛肉 原切黄牛牛腩 1kg</h2>
                        <h3>店长每日精选</h3>
                        <span>省14元</span>
                        <div class="price">
                            <div class="r-price">
                                <div class="red">
                                    ￥<span>145</span>
                                </div>
                                <span>/袋</span>
                                <div class="gray">
                                    ￥159
                                </div>
                            </div>
                            <img src="../../assets/img/首页/首页内容/蓝色购物车.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.xiaolunbotu {
    width: 100%;
    background-color: #FFC5A3;
    border-radius: 15px;
    margin: 10px 0;

    .xLunboTop {
        height: 40px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .left {
            display: flex;
            align-items: center;
            
            >span{
                font-size:20px;
                color:#DF900A;
                font-weight: 700;
                letter-spacing: 1px;
                margin-left:10px;
            }
            .img {
                display: flex;
                align-items: center;
                background-color: #F9925C;
                padding:0 5px;
                border-radius: 10px;
                img{
                    width: 16px;
                }
                span{
                    color:#fff;
                    font-weight: 700;
                    font-size:14px;
                }
            }
        }
        .right{
            color:#DF900A;
            font-weight: 700;
            margin-right:10px;
        }
    }
    .xLunboBottom{
        width: 100%;
        padding: 10px 0;
        .inner{
            width: 80%;
            // height: 140px;
            margin:0 auto;
            background-color: #FFFFFF;
            border-radius: 15px;
            .x-l-top{
                height: 30px;
                border-bottom:1px solid gray;
                display:flex;
                align-items: center;
                img{
                    width: 20px;
                    margin-left:10px;
                }
                span{
                    color:#DF900A;
                    margin-left:5px;
                }
            }
            .x-l-bottom{
                width: 90%;
                height: 110px;
                margin:5px auto;
                display: flex;
                align-items: center;
                justify-content: space-between;
                .left{
                    width: 40%;
                    height: 100%;
                    img{
                        width: 100%;
                    }
                }
                .right{
                    width: 58%;
                    height: 100%;
                    h2{
                        font-size:13px;
                    }
                    h3{
                        font-size:10px;
                        color:#C7AA73;
                    }
                    >span{
                        border:1px solid ;
                        border-radius: 4px;
                        color:#E55859;
                        font-size:8px;
                    }
                    .price{
                        display:flex;
                        justify-content: space-between;
                        .r-price{
                            color:#D7D8D4;
                            font-size:12px;
                            display:flex;
                            align-items: center;
                            .red{
                                color:#E55859;
                                >span{
                                    font-size:16px;
                                }
                            }
                            .gray{
                                text-decoration: line-through;
                                font-size:12px;
                            }
                        }
                        img{
                            width: 30px;
                            height: 30px;
                        }
                    }
                }
            }
        }
    }
}
</style>